function setActive($tabsContainer, $tabs, $panels, activeIndex) {
  $tabs.filter('.active').removeClass('active')
  const leftEdge = $tabsContainer.offset().left
  const $activeTab = $tabs.eq(activeIndex)
  $activeTab.addClass('active')
  const $indicator = $tabsContainer.find('.mh-nav-tabs-nav-indicator')
  $indicator.css('transform', `translate(${$activeTab.offset().left - leftEdge}px, 0) scale(${$activeTab.width() / 100}, 1)`)
  
  $panels.filter('.active').removeClass('active show')
  const $activePanel = $panels.eq(activeIndex)
  $activePanel.addClass('active')
  
  setTimeout(() => {
    $activePanel.addClass('show')
  }, 67)
  
  $tabsContainer.data('active', activeIndex)
}

export default function initNavTabs() {
  const $ = window.jQuery;
  
  $('.mh-nav-tabs').each(function(i, el){
    const $tabsContainer = $(el)
    const $tabs = $tabsContainer.find('.mh-nav-tabs-nav')
    const $panels = $tabsContainer.find('.mh-nav-tabs-panel')
    const activeIndex = +$tabsContainer.data('active')
    setActive($tabsContainer, $tabs, $panels, activeIndex)
  })
  
  $('.mh-nav-tabs-nav>a').on('click', function(e) {
    e.preventDefault();
    
    const $this = $(this)
    const $tabsContainer = $this.closest('.mh-nav-tabs')
    const $tabs = $tabsContainer.find('.mh-nav-tabs-nav')
    const $panels = $tabsContainer.find('.mh-nav-tabs-panel')
    const targetIndex = +$this.data('index')
    const activeIndex = +$tabsContainer.data('active')
    if (targetIndex !== activeIndex) {
      setActive($tabsContainer, $tabs, $panels, targetIndex)
    }
  })
}